html, body{
    height: 100%;
    overflow-x: hidden;
}

body{
    font-family: "Microsoft YaHei", Arial, Tahoma, sans-serif;
}

/*== flex box ==*/
.flex{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display: flex;
}

.flex > .flex-item{
    display: block;
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -ms-flex:1;
    flex:1;
}

.video-container{
    position: absolute;
    left:0;
    top:0;
    right:0;
    overflow: hidden;
    background-color: #000;
}

.video-container video{
    display: block;
    width:100%;
    height:202px;
}

.chat-container{
    position: absolute;
    left:0;
    right:0;
    top:202px;
    bottom: 0;
    margin:0;
    overflow: hidden;
}

.chat-main{
    position: absolute;
    left:0;
    top:0;
    bottom: 0;
    right:300px;
    width:auto;
    padding-left:0;
    padding-right:0;
}

.chat-users{
    display: none;
}

.chat-sidebar{
    position: absolute;
    top:0;
    right:0;
    bottom: 0;
    width:300px;
    padding-left:0;
    padding-right:0;
    z-index: 100;
}

.chat-sidebar.slide{
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.chat-sidebar.slide.in{
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.chat-sidebar > .panel{
    height:100%;
    margin-bottom: 0px;
}

.message-container{
    position: absolute;
    left:0px;
    top:0px;
    right:0px;
    padding:10px;
    bottom: 144px;
    overflow-x:hidden;
    overflow-y: auto;
}

.panel-input{
    position: absolute;
    left:0;
    bottom: 0;
    right:0;
    margin-bottom: 0;
    border-right-width:0;
}

.panel-input > .panel-body{
    padding:0;
}

.panel{
    border-radius:0;
}

.input-content{
    min-height:60px;
    overflow: auto;
    resize: none;
    border-radius: 0;
    border-width:0;
}

.send-button{
    border-radius: 0;
    line-height: 38px;
}

.message-item{
    margin-bottom: 10px;
}

.message-item > p{
    margin-bottom: 0;
}

.message-item .msg-hd{
    margin-bottom: 3px;
}

.message-item .msg-bd{
    word-break: break-all;
    word-wrap: break-word;
    padding-left:1.5em;
}

.message-item .msg-time{
    color:#999;
    font-size:12px;
    font-weight:normal;
}

.backdrop{
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    background-color: #000;
    display: none;
}

.backdrop.fade{
    opacity: 0;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease;
}

.backdrop.fade.in{
    opacity: .5;
}

em.mark{
    font-size:12px;
    font-style: normal;
}

@media (max-width:640px) {
    .chat-main{
        right:0;
    }
    .chat-sidebar{
        display: none;
        -webkit-transition: -webkit-transform .4s ease;
        transition: transform .4s ease;
    }
    .panel-input{
        border-right-width:1px;
    }
    .chat-users{
        float:right;
        display: inline-block;
        color:#444;
        cursor: pointer;
    }
    .chat-users > svg{
        fill:currentColor;
        width:26px;
        height:26px;
    }
    .arrow-right{
        position: absolute;
        padding:10px;
        top:0;
        right:5px;
        cursor: pointer;
    }

    .arrow-right:before{
        content: '';
        display: inline-block;
        width:10px;
        height:10px;
        border-style: solid;
        border-width:2px;
        border-color:#444 #444 transparent transparent;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}